<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        span{
            border:1px solid transparent;
        }
    </style>
</head>
<body>
    <div id="app">
        <comp-a ></comp-a>
        <comp-b ></comp-b>
        <comp-c ></comp-c>
    </div>
</body>
<script>

    // 多个组件,都有相同的功能  => 数据/计算属性/方法/数据监听/生命周期钩子 => 将这些相同的功能提取出来=>代码复用(功能复用)

    // 全局混入 => 将所有组件中的公共 数据/计算属性/方法/数据监听/生命周期钩子=> 提取出来=> 供所有Vue组件使用
    // 如果混入过程中, 组件内存在同名属性 / 方法 /钩子函数 怎么办?
    // 1. 属性 / 方法 => 优先使用组件内的(就近原则)
    // 2. 钩子函数会整合到数组中,依次执行 => 都会执行

    // 但是不建议使用全局混入,看情况   => 混入到每一个组件中

    Vue.mixin({
        data(){
            return {
                a:1,
            }
        },
        methods: {
            addA(){
                this.a ++;
            }
        },
        mounted() {
            console.log("组件挂载完毕",this.a);
        },
    })
   

    Vue.component("comp-a",{
        template:`<div>
            <p>这是组件A</p>
            <p>a:{{a}}</p>
            <p><button @click="addA">a++</button></p>
        </div>`,
    })

    Vue.component("comp-b",{
        data(){
            return {
                a:10,
            }
        },
        methods:{
            addA(){
                this.a+=10;
            }
        },
        template:`<div>
            <p>这是组件B</p>
            <p>a:{{a}}</p>
            <p><button @click="addA">a++</button></p>
        </div>`,
    })

    Vue.component("comp-c",{
        template:`<div>
            <p>这是组件A</p>
            <p>a:{{a}}</p>
            <p><button @click="addA">a++</button></p>
        </div>`,
        mounted(){
            console.log("组件C挂载完毕");
        }
    })

    var app = new Vue({
        el:"#app",
        data:{
           
        },
    })
</script>
</html>